<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body>

<style>
    body {padding: 20px;}
    .btn {margin: 10px;width: 120px;}
    h5 {padding: 10px;}
</style>

<!----------------------------------------------------------------------------------------->

<h5>control</h5>
<a class="audio-error btn">error</a>
<a class="audio-right btn">right</a>
<a class="audio-trigger btn">trigger</a>
<a class="audio-brilliant btn">brilliant</a>
<a class="audio-notify btn">notify</a>
<a class="audio-button btn">button</a>
<h5>other</h5>
<a class="audio-aeolian btn bg-red">aeolian</a>
<a class="audio-bounce btn bg-red">bounce</a>
<a class="audio-boxing btn bg-red">boxing</a>
<a class="audio-ding btn bg-red">ding</a>
<a class="audio-drip btn bg-red">drip</a>
<a class="audio-drum btn bg-red">drum</a>
<h5>long</h5>
<a class="audio-dulcimer btn bg-green">dulcimer</a>
<a class="audio-wave btn bg-green">wave</a>
<a class="audio-audio btn bg-green">audio</a>

<!----------------------------------------------------------------------------------------->

</body>
</html>